<template>
  <div class="openMoreButtonContainer" v-show="this.show !== 'gone'">
    <div class="openMoreButton" @click="clickButton" v-show="this.show !== 'invisible'">
      <div class="title">{{ this.title }}</div>
      <img class="arrow" :src="getArrowImg"/>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    titlePro:{
      type: String,
      default: "",
    },
    arrowImgPro:{
      type: String,
      default: null,
    },
    showPro:{
      type: String,
      default: "visible",
    }
  },
  data(){
    return {
      title: "",//标题
      arrowImg: null, //箭头图片
      show: "visible", //控件是否可见：visible-可见，invisible-不可见，但仍占据空间 gone-不可见，也不占据空间
    };
  },
  mounted() {
    this.title = this.titlePro;
    this.arrowImg = this.arrowImgPro;
    this.show = this.showPro;
  },
  watch:{
    titlePro(newVal){
      this.title = newVal;
    },
    arrowImgPro(newVal){
      this.arrowImg = newVal;
    },
    showPro(newVal){
      this.show = newVal;
    },
  },
  computed:{
    getArrowImg(){
      return this.arrowImg;
    },

  },
  methods: {
    clickButton(){
      this.$emit("clickButton");
    },
  },
}
</script>
<style scope>
.openMoreButtonContainer{
  width: 100%;
  height: 44px;
  display: flex;
  flex-direction: column;
  background-color: var(--current-card-background-color);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.openMoreButtonContainer .openMoreButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 36px;
}
.openMoreButtonContainer .openMoreButton .title{
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  /* background: rgba(255,255,0,0.5); */
  color: var(--current-second-title-color);
}
.openMoreButtonContainer .openMoreButton .arrow{
  width: 24px;
  height: 12px;
  margin-left: 2px;
}

</style>
